<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <!-- 用户信息 -->
    <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6">
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-xl font-bold">个人中心</h1>
            <button class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                <i class="fas fa-cog text-white"></i>
            </button>
        </div>
        
        <div class="flex items-center">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face" alt="用户头像" class="w-20 h-20 rounded-full object-cover mr-4">
            <div class="flex-1">
                <h2 class="text-xl font-bold mb-1">张经理</h2>
                <p class="text-blue-100 text-sm mb-2">采购部 | 高级采购员</p>
                <div class="flex items-center">
                    <span class="px-2 py-1 bg-white bg-opacity-20 rounded-full text-xs">在线</span>
                    <span class="ml-2 text-xs text-blue-100">最后登录：今天 08:30</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 工作统计 -->
    <div class="bg-white p-4 mb-4">
        <h3 class="font-semibold text-gray-800 mb-4">工作统计</h3>
        <div class="grid grid-cols-3 gap-4">
            <div class="text-center">
                <div class="text-2xl font-bold text-blue-600">156</div>
                <div class="text-xs text-gray-500">处理中车辆</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-green-600">89</div>
                <div class="text-xs text-gray-500">本月完成</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-orange-600">12</div>
                <div class="text-xs text-gray-500">待处理</div>
            </div>
        </div>
    </div>

    <!-- 功能菜单 -->
    <div class="bg-white p-4 mb-4">
        <h3 class="font-semibold text-gray-800 mb-4">功能菜单</h3>
        <div class="space-y-4">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-car text-blue-600"></i>
                    </div>
                    <span class="text-gray-800">我的车辆</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-chart-line text-green-600"></i>
                    </div>
                    <span class="text-gray-800">工作报表</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-file-alt text-purple-600"></i>
                    </div>
                    <span class="text-gray-800">资料管理</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-bell text-orange-600"></i>
                    </div>
                    <span class="text-gray-800">消息通知</span>
                </div>
                <div class="flex items-center">
                    <span class="px-2 py-1 bg-red-100 text-red-600 text-xs rounded-full mr-2">3</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统设置 -->
    <div class="bg-white p-4 mb-4">
        <h3 class="font-semibold text-gray-800 mb-4">系统设置</h3>
        <div class="space-y-4">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-bell text-blue-600"></i>
                    </div>
                    <span class="text-gray-800">推送通知</span>
                </div>
                <div class="w-10 h-6 bg-blue-600 rounded-full relative">
                    <div class="w-4 h-4 bg-white rounded-full absolute right-1 top-1"></div>
                </div>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-shield-alt text-green-600"></i>
                    </div>
                    <span class="text-gray-800">隐私设置</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-language text-purple-600"></i>
                    </div>
                    <span class="text-gray-800">语言设置</span>
                </div>
                <div class="flex items-center">
                    <span class="text-sm text-gray-500 mr-2">简体中文</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-moon text-orange-600"></i>
                    </div>
                    <span class="text-gray-800">深色模式</span>
                </div>
                <div class="w-10 h-6 bg-gray-300 rounded-full relative">
                    <div class="w-4 h-4 bg-white rounded-full absolute left-1 top-1"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 帮助与支持 -->
    <div class="bg-white p-4 mb-4">
        <h3 class="font-semibold text-gray-800 mb-4">帮助与支持</h3>
        <div class="space-y-4">
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-question-circle text-blue-600"></i>
                    </div>
                    <span class="text-gray-800">使用帮助</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-headset text-green-600"></i>
                    </div>
                    <span class="text-gray-800">联系客服</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-info-circle text-purple-600"></i>
                    </div>
                    <span class="text-gray-800">关于我们</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
        </div>
    </div>

    <!-- 版本信息 -->
    <div class="bg-white p-4 mb-4">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-sm font-medium text-gray-800">CarTrack</div>
                <div class="text-xs text-gray-500">版本 1.0.0</div>
            </div>
            <button class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg">
                检查更新
            </button>
        </div>
    </div>

    <!-- 退出登录 -->
    <div class="p-4">
        <button class="w-full bg-red-600 text-white py-3 rounded-lg font-medium">
            <i class="fas fa-sign-out-alt mr-2"></i>
            退出登录
        </button>
    </div>
</body>
</html> 